<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { useTitle } from '@/hooks/useTitle'
import { queryNoticeList, readNotice } from '@/api/system'
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/index'
import { ElMessageBox } from 'element-plus'
const userStore = useUserStore()

let timer: any
onMounted(() => {
  useTitle()
})

const getNoticeList = async () => {
  const res: any = await queryNoticeList()
  if (res.code == 200) {
    let item = res.data.find((item: any) => item.noticeState == 0)
    if (item) {
      ElMessageBox.confirm(item.noticeMsg, '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'info',
      }).then(async () => {
        readNoticeDetail({ businessType: item?.businessType })
      })
    }
  }
}

const loadNoticeList = () => {
  timer = setInterval(() => {
    if (userStore.vToken) {
      getNoticeList()
    }
  }, 1000 * 60);
}

loadNoticeList()

// 监听状态变化
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    clearTimeout(timer)
    console.log("隐藏");
  } else {
    clearTimeout(timer)
    loadNoticeList()
    console.log("可见");
  }
});

const readNoticeDetail = async (data: any) => {
  console.log(data)
  const res = await readNotice(data)
  console.log(res)
}
</script>

<style>
body {
  margin: 0;
}

#app :deep(.el-drawer) {
  overflow: auto;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.flex-jsb {
  justify-content: space-between;
}

.flex-cc {
  justify-content: center;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.w-full {
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-scrollbar__bar.is-horizontal {
  height: 15px !important;
}

.overflow-text .el-tooltip div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
